<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">

    <title>悦读读书管理系统-注册</title>
    <style>

           	a:link{
				text-decoration: none;
				color:#BACCD9;
			}
			a:visited{
				text-decoration: none;
				color:#BACCD9;
			}
			a:hover{
				text-decoration: none;
				color:#FFFFFF;
			}
		.menu{
				background-color: #EC8AA4;/*中国传统报春色*/
				display: flex;
				justify-content: space-between;
				height:60px;
				border-radius: 5px;
				}
				/*测试背景 body {
				  background-color: #f0f0f0;
				}*/
		    .menu .menur ul{
				color:#E4DFD7;/*中国传统珍珠色*/
				list-style: none;
				display:flex;
				height: 30px;
			}
			.menu .menur ul li{
				font-size: 12px;
				display:flex;
				align-items: center;
				margin:0 25px;
				cursor:pointer;
			}
			.menu .menur ul li:hover{
				color:#FFFFFF;
			}

	</style>
    <style type="text/css">
			.yd{
				font-size: 30px;
				font-weight: 888;
				letter-spacing:3px;
				position: absolute;
				margin-left:20px;
				margin-top: 10px;
				color:#E4DFD7;/*中国传统珍珠色*/
				cursor: default;
			}
			.ydds{
				font-size: 30px;
				font-weight: 888;
				letter-spacing:3px;
				position: absolute;
				margin-left:150px;
				margin-top: 10px;
				color:#E4DFD7;/*中国传统珍珠色*/
				cursor: default;
			}
			.logo{
				position: absolute;
				margin-left:48%;
				margin-top: 130px;
			}
			.img1{
				border-radius: 10px;
				}

			.dl{
				font-size: 30px;
				font-weight: 888;
				letter-spacing:2px;
				position: absolute;
				margin-left:44%;
				margin-top: 240px;
				color:#BABCD1;/*传统秋波色*/3
			}
			.login{
				position: absolute;
				margin-top: 333px;
				margin-left: 42%;
			}
			.user{
			    margin-top: 10px;
				display:flex;
				justify-content: space-between;
				align-items: center;
				border-radius: 8px;
				border:solid 3px #E0E0E0;
				width:255px;
				height:36px;
			}
			.user input{
				width:120px;
				height:30px;
				font-size: 15px;
				margin-left: 10px;
				border:none;
				outline: none;
			}
			.pswd{
				margin-top: 10px;
				display:flex;
				justify-content: space-between;
				align-items: center;
				border-radius: 8px;
				border:solid 3px #E0E0E0;
				width:255px;
				height:36px;
			}
			.pswd input{
				width:240px;
				height:30px;
				font-size: 15px;
				margin-left: 10px;
				border:none;
				outline: none;
			}
			.pswds{
				margin-top: 10px;
				display:flex;
				justify-content: space-between;
				align-items: center;
				border-radius: 8px;
				border:solid 3px #E0E0E0;
				width:255px;
				height:36px;
			}
			.pswds input{
				width:240px;
				height:30px;
				font-size: 15px;
				margin-left: 10px;
				border:none;
				outline: none;
			}
			.other{
                margin-top: 10px;
				display:flex;
				justify-content: space-between;
				align-items: center;
				border-radius: 8px;
				border:solid 3px #E0E0E0;
				width:255px;
				height:36px;
			}
			.other input{
				width:120px;
				height:30px;
				font-size: 15px;
				margin-left: 10px;
				border:none;
				outline: none;
			}
			.user #code{
			    width:80px;
				height: 30px;
				text-align:center;
				color: #E8EAED;/*传统浅云色*/
				margin-left: 3vh;
				border:none;
				border-radius: 8px;
				background-color: #EC8AA4;/*中国传统报春色*/
				cursor:pointer;

			}
			.sub input{
				width:240px;
				height: 40px;
				color: #E8EAED;/*传统浅云色*/
				position: absolute;
				margin-top: 24px;
				margin-left: 10px;
				border:none;
				border-radius: 8px;
				background-color: #EC8AA4;/*中国传统报春色*/
				cursor:pointer;
			}
			</style>
</head>



<body>
<div class="menu">
    <div class="menul">
        <p class="yd">YueDu</p>
        <p class="ydds">悦读读书管理系统</p>
    </div>
    <div class="menur">
        <ul>
            <li th:onclick="window.location.href='/users/gotoLogin'"><a>登录</a></li>
            <li onclick="goBack()">返回</li>
        </ul>
    </div>
</div>

<div class="jiemian">
    <div class="logo">
        <img class="img1" th:src="@{/img/YueDu.png}" alt="" width="72" height="72" ></div>
    <p class="dl">悦读账号注册</p>
</div>
<div class="login" >
    <form th:action="@{/account/code}">

        <div class="user">
            <input name="phone" type="text" th:placeholder="请输入手机号码"  required>
            <button id="code" type="submit" >获取验证码</button>
        </div>


    </form>
    <form  th:action="@{/account/signUp}" method="post">

        <div class="other">
            <input name="code" type="text" th:placeholder="请输入验证码" >
        </div>
        <div class="user">
            <input name="phone" type="text" th:placeholder="请再次输入手机号码"  required>
        </div>
        <div class="pswd">
            <input name="password" type="password" th:placeholder="请输入密码" required>
        </div>
        <div class="pswds">
            <input name="passwords" type="password" th:placeholder="请确认密码" required>
        </div>

        <div class="sub">
            <input type="submit" value="注册" />
        </div>
    </form>
</div>

<!-- jQuery文件引用 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- jQuery代码 -->
<script>
    $(document).ready(function() {
      $('#code').click(function() {
        $.ajax({
          url: '/account/code',
          type: 'POST',
          success: function(response) {
            console.log('验证码发送成功！');
          },
          error: function(error) {
            console.error('验证码发送失败！', error);
          }
        });
      });
    });


    function goBack() {
        window.history.go(-1);
    }

</script>


</body>

</html>
